<template>
	<view>
		<view class="title">
			<view>车次单号: </view><view class="">{{TruckTransportNO}}</view>
		</view>

		<view class="cartPlat"><view>车牌：{{LicensePlateNO}}</view></view>
		<view class="orderList" v-for="(item, index) in detailList" :key="index">
			<view class="orderList-view">
				<view class="">
					<text>{{ item.InboundOrderNO }}</text>
				</view>
				<button class="cu-btn  line-blue " 
				 size="mini" @click="cancelBind(index)"  :disabled="item.Status!==0? true:false" :class="[item.Status!==0?'gray':'']">取消绑定</button>
			</view>
		</view>
		<view class="padding flex flex-direction">
			<button class="cu-btn bg-blue lg" @click="bindCargo">
				绑定运输货物</button></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			//iScancel:false,:class="[{cancelBtn:isFucos}]"
			TruckTransportNO:'',
			LicensePlateNO:'',
			TruckTransportID:'',
			detailList: [],
				
		}
	},

	onLoad(e){
		this.TruckTransportNO=e.id
		this.LicensePlateNO=e.no
		this.TruckTransportID=e.ttid
		this.getTruckTransport()
		
	},
	
	methods: {
		getTruckTransport(){
			uni.showLoading({
			    title: '加载中'
			});
			this.$store.dispatch('uni/GetTruckTransport',{
			truckTransportNO:this.TruckTransportNO,
			}).then(res=>{
				this.detailList=res.Data.DetailList
				uni.hideLoading()
				
			}).catch(()=>{
				uni.hideLoading()
			})
		},
		cancelBind(index){
			
			uni.showModal({
			    title: '取消绑定',
			    content: '是否取消绑定',
			    success: (res)=> {
			        if (res.confirm) {
			           
						
						this.$store.dispatch('uni/CancelBindGoods',{
						truckTransportNO:this.TruckTransportNO,
						InboundOrderNO:this.detailList[index].InboundOrderNO,
						query:true
						}).then(res=>{
							const {Message}=res
							uni.showToast({
								icon:'none',
								 title:Message ,
								 duration: 1500
							})
							this.getTruckTransport()
							
							
						})
						
								
			        } else if (res.cancel) {
					
			        }
			    }
			});
		},
		bindCargo(){
			
			uni.navigateTo({
				url:`/pages/lineUp/bindGoods?id=${this.TruckTransportNO}&no=${this.LicensePlateNO}&&ttid=${this.TruckTransportID}`
			})
		}
	}
}
</script>

<style lang="less" scoped>
.title {
	
	background-color: #ffffff;
	color: #2a8cf6;
	margin-bottom: 85upx;
	display: flex;
	justify-content: flex-start;
	view {
		height: 80upx;
		line-height: 80upx;
		border-bottom: 4upx solid #2a8cf6;
		width: 400upx;
		padding-left: 30upx;
	}
}
.cartPlat {
	height: 80upx;
	background-color: #0081FF;
	color: #ffffff;
	margin: 40upx 0;
	view {
		line-height: 80upx;

		width: 400upx;
		padding-left: 30upx;
		font-weight: bold;
		font-size: 16px;
	}
}
.orderList {
	display: flex;

	.orderList-view {
		height: 80upx;
		border: 1upx solid #2a8cf6;
		border-radius: 10upx;
		background-color: #ffffff;
		margin-bottom: 30upx;
		flex: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		text {
			line-height: 80upx;
			margin: 0upx 0upx 0 30upx;
		}
		button {
			height: 60upx;
			line-height: 60upx;
			margin-right: 30upx;
			background-color: #0081FF;
			color: #ffffff;
		}
		.gray{
			background-color: #A2A8A2;
		}
	}
}
.line-blue{
	background-color: #007AFF;
}
	
.orderList .orderList-view .cancelBtn {
	background-color: #d9d3cf;
}
.flex-direction {
	margin-top: 100upx;
}
</style>
